<template>
    <div>
        <div style="text-align: center; width: 200px; line-height: 60px; border-bottom: 1px solid rgb(212, 212, 212); font-size: 20px">订阅面板</div>
        <div class="list-left" :style="{ height: leftHgt }">
            <div class="module" style="height: 40vh">
                <div class="list-heard">模块</div>
                <div class="left-tree">
                    <el-tree
                        ref="tree1"
                        class="filter-tree"
                        node-key="id"
                        :data="moduleTreeData"
                        :expand-on-click-node="false"
                        default-expand-all
                        @node-click="handleModuleNodeClick"
                        :current-node-key="currentNodeKey"
                        highlight-current
                    >
                        <span slot-scope="{ node, data }">
                            <span :title="node.level == 1 ? data.label : data.id + '-' + data.label">{{
                                node.level == 1 ? data.label : data.id + '-' + data.label
                            }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div class="panel" style="height: 40vh">
                <div class="list-heard">面板</div>
                <div class="left-tree">
                    <el-tree
                        ref="tree2"
                        class="filter-tree"
                        node-key="id"
                        :data="panelTreeData"
                        default-expand-all
                        :expand-on-click-node="false"
                        @node-click="handlePanelNodeClick"
                        highlight-current
                    >
                        <span slot-scope="{ node, data }">
                            <span :title="node.level == 1 ? data.label : data.id + '-' + data.label">{{
                                node.level == 1 ? data.label : data.id + '-' + data.label
                            }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </div>

        <div v-if="isModule">
            <!-- 模块 -->
            <div v-if="cutInfo === '默认模块' || cutInfo === '自定义模块'" class="list-right">
                <div v-if="moduleForm.moduleType === '1'" class="list-right-div">
                    <el-button type="primary" v-authCode.show="B_0175" key="table1-btn1" @click="openAddModuleDialog">新增</el-button>
                    <el-button type="danger" size="mini" v-authCode.show="B_0176" key="table1-btn2" @click="handleModuleRemove(-1)">删除</el-button>
                </div>

                <div v-else-if="moduleForm.moduleType === '2'" class="list-right-div">
                    <el-button type="primary" v-authCode.show="B_0173" key="table1-btn1" @click="openAddModuleDialog">新增</el-button>
                    <el-button type="danger" size="mini" v-authCode.show="B_0174" key="table1-btn2" @click="handleModuleRemove(-1)">删除</el-button>
                </div>

                <el-table
                    :data="moduleData"
                    :key="moduleKey + 'moduleKey'"
                    v-table-top="modulePage.currentPage"
                    @selection-change="handleSelectionChange"
                    border
                    size="mini"
                    style="width: 100%"
                    height="calc(100vh - 140px)"
                >
                    <el-table-column type="selection" width="55" size="mini" :selectable="getSelectableModule"> </el-table-column>
                    <el-table-column prop="moduleCode" label="模块编号" min-width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="moduleName" label="模块名称" min-width="120" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="remark" label="模块说明" min-width="120" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createUser" label="创建人" min-width="100" show-overflow-tooltip />
                    <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span> {{ dateFormatter(scope.row.createDate, scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifyUser" label="更新人" min-width="100" show-overflow-tooltip />
                    <el-table-column prop="modifyTime" label="更新时间" width="160" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span> {{ dateFormatter(scope.row.modifyDate, scope.row.modifyTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="moduleType" label="模块类型" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{ scope.row.moduleType === '1' ? '默认模块' : '自定义模块' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="autoTriggerParamShow" prop="initiativeWarn" label="自动触警模块" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{ scope.row.initiativeWarn == '1' ? '是' : '否' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <div v-if="scope.row.moduleType === '1'">
                                <RiskIconButton
                                    type="primary"
                                    icon="el-icon-view"
                                    topTitle="查看模块"
                                    @on-click="openViewModuleDialog(scope.row)"
                                ></RiskIconButton>
                                <RiskIconButton
                                    type="primary"
                                    icon="el-icon-edit"
                                    topTitle="编辑模块"
                                    v-authCode="B_0185"
                                    @on-click="openEditModuleDialog(scope.row)"
                                ></RiskIconButton>
                                <RiskIconButton
                                    type="danger"
                                    icon="el-icon-delete"
                                    topTitle="删除模块"
                                    v-authCode="B_0176"
                                    :disabled="scope.row.moduleCode == 'YH001'"
                                    @on-click="handleModuleRemove(scope.row.moduleCode)"
                                ></RiskIconButton>
                            </div>
                            <div v-else>
                                <RiskIconButton
                                    type="primary"
                                    icon="el-icon-view"
                                    topTitle="查看模块"
                                    @on-click="openViewModuleDialog(scope.row)"
                                ></RiskIconButton>
                                <RiskIconButton
                                    type="primary"
                                    icon="el-icon-edit"
                                    topTitle="编辑模块"
                                    v-authCode="B_0186"
                                    @on-click="openEditModuleDialog(scope.row)"
                                ></RiskIconButton>
                                <RiskIconButton
                                    type="danger"
                                    icon="el-icon-delete"
                                    topTitle="删除模块"
                                    v-authCode="B_0174"
                                    @on-click="handleModuleRemove(scope.row.moduleCode)"
                                ></RiskIconButton>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <risk-pagination :paging="modulePage" @page-change="currentChange"></risk-pagination>
                </div>

                <!-- 新增\编辑\查看模块信息 -->
                <yh-dialog
                    :title="moduleDialogVO.title"
                    :visible.sync="moduleDialogVO.visible"
                    width="720px"
                    :close-on-click-modal="false"
                    drag
                    @closed="handleDialogClosed"
                >
                    <el-form label-width="115px" size="mini" :model="moduleForm" ref="moduleForm">
                        <el-form-item label="模块名称：" prop="moduleName">
                            <el-input
                                style="width: 90%"
                                :readonly="moduleDialogVO.action == 0"
                                v-model="moduleForm.moduleName"
                                :disabled="moduleForm.moduleCode == 'YH001'"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="模块说明：" prop="remark">
                            <el-input
                                type="textarea"
                                style="width: 90%"
                                :readonly="moduleDialogVO.action == 0"
                                :rows="2"
                                v-model="moduleForm.remark"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="轮询时间段设置：" label-width="160px">
                            <el-button type="primary" size="mini" @click="carouselAddClick" :disabled="moduleDialogVO.action == '0'">添加</el-button>
                        </el-form-item>
                        <el-form-item label="轮询时间段:" label-width="120px">
                            <div v-for="(item, index) in carouselTimes" :key="index">
                                <div style="display: flex; margin-bottom: 6px">
                                    <el-time-picker
                                        size="mini"
                                        v-model="item.startTime"
                                        :picker-options="{
                                            selectableRange: '00:00:00 - 23:59:59',
                                        }"
                                        format="HH:mm:ss"
                                        value-format="HHmmss"
                                        placeholder="任意时间点"
                                        @change="startTimeChange(item)"
                                    >
                                    </el-time-picker>
                                    &nbsp; - &nbsp;
                                    <el-time-picker
                                        size="mini"
                                        v-model="item.endTime"
                                        :picker-options="{
                                            selectableRange: (timeFormat(item.startTime, true) || '00:00:00') + ' - 23:59:59',
                                        }"
                                        format="HH:mm:ss"
                                        value-format="HHmmss"
                                        placeholder="任意时间点"
                                        @change="endTimeChange(item)"
                                    >
                                    </el-time-picker>
                                    &nbsp; 计算频率:
                                    <el-input
                                        style="max-width: 100px; margin: 0 10px"
                                        v-model="item.interval"
                                        @change="intervalChange(item, item.interval)"
                                        @input="item.interval = item.interval.replace(/^(0+)|[^\d]+/g, '')"
                                    ></el-input>
                                    分
                                    <div
                                        class="icon-minus"
                                        :style="{
                                            display: carouselTimes.length > 1 ? '' : 'none',
                                            backgroundColor: moduleDialogVO.action == '0' ? '#a0cfff' : '#409eff',
                                        }"
                                        :class="{ temp: moduleDialogVO.action == '0' }"
                                    >
                                        <el-tooltip content="删除" placement="top">
                                            <i
                                                class="el-icon-minus"
                                                circle
                                                type="primary"
                                                size="mini"
                                                style="color: white"
                                                @click="carouselDeleteClick(item, index)"
                                            >
                                            </i>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="autoTriggerParamShow" label="是否自动触警模块：" label-width="160px">
                            <el-select size="mini" v-model="moduleForm.initiativeWarn" :disabled="moduleForm.moduleCode === 'YH001'">
                                <el-option value="0" label="否"></el-option>
                                <el-option value="1" label="是"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer" style="text-align: right; margin-right: 10px">
                        <el-button size="mini" @click="closeModuleDialog"> 取 消 </el-button>
                        <el-button v-if="moduleDialogVO.action != 0" size="mini" type="primary" @click="submitModuleForm" key=""> 确 定 </el-button>
                    </div>
                </yh-dialog>

                <!-- 删除 -->
                <div>
                    <yh-dialog drag title="确定删除模块吗?" :visible.sync="delModuleDialog" width="500px">
                        <div class="remove-text">
                            <span> {{ delModuleCodeList.join(' , ') }}</span>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="delModuleDialog = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="delModule">确 定</el-button>
                        </div>
                    </yh-dialog>
                </div>
            </div>

            <!-- 模块详情 -->
            <div v-else>
                <div class="list-right">
                    <div v-if="moduleForm.moduleType === '1'" class="list-right-div">
                        <el-button type="primary" size="mini" v-authCode.show="B_0179" @click="queryEntryList" v-if="moduleCode != 'YH001'"
                            >编辑</el-button
                        >
                        <el-button type="danger" size="mini" v-authCode.show="B_0180" @click="openDelEntryDialog" v-if="moduleCode != 'YH001'"
                            >删除</el-button
                        >
                        <el-button type="primary" size="mini" v-authCode.show="B_0182" @click="queryModuleDetailDialog = true">查询</el-button>
                    </div>

                    <div v-else-if="moduleForm.moduleType === '2'" class="list-right-div">
                        <el-button type="primary" size="mini" v-authCode.show="B_0177" @click="queryEntryList">编辑</el-button>
                        <el-button type="danger" size="mini" v-authCode.show="B_0178" @click="openDelEntryDialog">删除</el-button>
                        <el-button type="primary" size="mini" v-authCode.show="B_0181" @click="queryModuleDetailDialog = true">查询</el-button>
                    </div>
                    <el-table
                        :data="moduleDetailData"
                        :key="moduleDetailKey + 'moduleDetailKey'"
                        @selection-change="handleSelectionDetailChange"
                        v-table-top="moduleDetailPage.currentPage"
                        border
                        size="mini"
                        style="width: 100%"
                        height="calc(100vh - 140px)"
                        v-loading="loading"
                    >
                        <el-table-column type="selection" width="55" size="mini"> </el-table-column>
                        <el-table-column prop="entryCode" label="条目编号" width="150" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="entryName" label="风险说明" width="150" show-overflow-tooltip> </el-table-column>
                        <el-table-column
                            prop="entryType"
                            label="风险类型"
                            width="120"
                            :formatter="(row, column) => Invest.entryType[row.entryType]"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column prop="entryStatusValid" label="状态" width="120" :formatter="formatStatus" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="riskCalTypes" label="作用范围" :formatter="formatRiskCalTypes" show-overflow-tooltip></el-table-column>

                        <el-table-column
                            prop="controlGrade"
                            label="风险等级"
                            width="100"
                            :formatter="(row, column) => dict.ControlGrade[row.controlGrade]"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column prop="accountControlValue" label="控制产品" min-width="100" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="scope.row.accountControlValue && scope.row.accountControlValue.length">
                                    <span>{{ scope.row.accountControlValue ? scope.row.accountControlValue[0] : '' }}</span>
                                    <el-tag style="float: right" size="small" @click="showFund(scope.row.accountControlValue)">{{
                                        '+' + scope.row.accountControlValue.length
                                    }}</el-tag>
                                </span>
                                <span v-else>{{ scope.row.accountControlValue }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <risk-pagination :paging="moduleDetailPage" @page-change="currentDetailChange('moduleDetail')"></risk-pagination>
                    </div>
                </div>
                <!-- 编辑模块下的条目 -->
                <div>
                    <yh-dialog
                        drag
                        title="选择条目"
                        v-if="editModuleDetailDialog"
                        :visible.sync="editModuleDetailDialog"
                        width="740px"
                        id="editDialog"
                        :close-on-click-modal="false"
                    >
                        <!-- <div :style="{ display: WEB_DOCKING == 'MAXWEALTH' ? '' : 'none' }"> -->
                        <div>
                            <span style="font-weight: 700"> 1.通过条目组设置<br /></span>
                            条目组<el-tooltip>
                                <div slot="content">设置default条目组 则为选择所有条目并会持续更新条目</div>
                                <i class="el-icon-question"></i> </el-tooltip
                            >：
                            <el-select
                                placeholder="请选择"
                                v-model="selectedItemGroup"
                                style="width: 250px"
                                size="mini"
                                filterable
                                clearable
                                multiple
                                collapse-tags
                            >
                                <el-option
                                    v-for="(item, index) in itemGroupAll"
                                    :key="index"
                                    :value="item.groupCode"
                                    :label="item.groupCode + ' ' + item.groupName"
                                >
                                </el-option>
                            </el-select>
                            <span style="font-weight: 700; display: block; margin: 10px 0"> 2. 通过勾选条目设置 </span>
                        </div>

                        <div style="height: 450px">
                            <RiskTrantable
                                leftPlaceholder="编号/名称"
                                rightPlaceholder="编号/名称"
                                :leftColumns="tranColumns"
                                :rightColumns="tranColumns"
                                :leftTableData="leftTranData"
                                :rightTableData="rightTranData"
                                :leftSearchNames="['entryCode', 'entryName']"
                                indexKey="entryCode"
                                ref="tranTable"
                                sort="entryName"
                            />
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="cancelModuleEntry"> 取 消 </el-button>
                            <el-button size="mini" type="primary" @click="updateModuleEntry">确 定 </el-button>
                        </div>
                    </yh-dialog>
                </div>

                <!-- 删除 -->
                <div>
                    <yh-dialog
                        drag
                        :title="'确定从' + cutInfo + '模块下移除条目吗?(已自动过滤条目组数据)'"
                        :visible.sync="delModuleDetailDialog"
                        width="500px"
                    >
                        <div class="remove-text">
                            <span> {{ delPendingData.join(' , ') }}</span>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="delModuleDetailDialog = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="delEntry">确 定</el-button>
                        </div>
                    </yh-dialog>
                </div>

                <!-- 查询 -->
                <div>
                    <yh-dialog title="条目查询" :visible.sync="queryModuleDetailDialog" width="600px" drag>
                        <el-form label-width="100px" size="mini" ref="queryForm" :model="queryForm">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="条目编号" prop="entryCode">
                                        <el-input v-model="queryForm.entryCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="条目说明" prop="entryName">
                                        <el-input v-model="queryForm.entryName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="风险类型" prop="entryType">
                                        <el-select v-model="queryForm.entryType" clearable>
                                            <el-option v-for="(value, key) in Invest.entryType" :key="key" :label="value" :value="key"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="作用范围" prop="riskCalTypes">
                                        <el-select v-model="queryForm.riskCalTypes" clearable>
                                            <el-option label="0 静态" value="0"> </el-option>
                                            <el-option label="1 指令" value="1"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="风险等级" prop="controlGrade">
                                        <el-select v-model="queryForm.controlGrade" clearable>
                                            <el-option v-for="(value, key) in dict.ControlGrade" :key="key" :label="value" :value="key"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="控制产品" prop="fundCode">
                                        <el-select clearable v-model="queryForm.fundCode" filterable placeholder="请选择">
                                            <el-option
                                                v-for="item in fundCodeSelectData"
                                                :key="item.fundCode"
                                                :label="item.fundCode + ' ' + item.fundNameSt"
                                                :value="item.fundCode"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="queryModuleDetailDialog = false">取 消</el-button>
                            <el-button size="mini" @click="resetEntryForm">重 置</el-button>
                            <el-button size="mini" type="primary" @click="searchEntry">确 定</el-button>
                        </div>
                    </yh-dialog>
                </div>

                <!-- 控制产品显示框 -->
                <yh-dialog drag title="产品明细" :close-on-click-modal="false" :visible.sync="fundDetailDialog" width="500px">
                    <el-table :data="fundDetailData" border size="mini" style="width: 100%">
                        <el-table-column prop="showCode" label="产品代码" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="fundNameSt" label="产品简称" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="fundDetailDialog = false">关 闭</el-button>
                    </div>
                </yh-dialog>
            </div>
        </div>

        <!-- 面板 -->
        <div v-else>
            <!-- <div v-if="cutInfo === '默认面板' || cutInfo === '我的面板'" class="list-right"> -->
            <div v-if="['-1', '0'].includes(panelCode)" class="list-right">
                <div class="list-right-div">
                    <!-- <div v-if="cutInfo === '我的面板'"> -->
                    <el-button type="primary" v-authCode.show="B_0165" key="table1-btn1" @click="openAddPanelDialog" v-if="cutInfo !== '系统面板'"
                        >新增</el-button
                    >
                    <el-button type="primary" v-authCode="B_0167" key="table1-btn1" @click="openAddSystemPanelDialog" v-if="cutInfo == '系统面板'"
                        >新增</el-button
                    >
                    <el-button type="danger" size="mini" v-authCode.show="B_0166" key="table1-btn2" @click="handlePanelRemove(-1)" v-if="cutInfo !== '系统面板'">删除</el-button>
                    <el-button type="danger" size="mini" v-authCode="B_0168" key="table1-btn2" @click="handlePanelRemove(-1)" v-if="cutInfo == '系统面板'">删除</el-button>
                    <!-- </div> -->
                </div>
                <el-table
                    :data="panelData"
                    :key="panelKey + 'panelKey'"
                    v-table-top="panelPage.currentPage"
                    @selection-change="handlePanelSelectionChange"
                    border
                    size="mini"
                    style="width: 100%"
                    height="calc(100vh - 140px)"
                    v-loading="loading"
                >
                    <el-table-column type="selection" width="55" size="mini" :selectable="getSelectablePanel"> </el-table-column>
                    <el-table-column prop="panelOrder" label="面板顺序" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.panelOrder }}
                            <span class="caret-wrapper"
                                ><i class="sort-caret" :class="{ ascending: scope['$index'] != 0 }" @click="orderClickOnPanel(scope, 'asc')"></i
                                ><i
                                    class="sort-caret"
                                    :class="{ descending: scope['$index'] != panelData.length - 1 }"
                                    @click="orderClickOnPanel(scope, 'des')"
                                ></i
                            ></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="panelCode" label="面板编号" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="panelName" label="面板名称" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createUser" label="创建人" min-width="100" show-overflow-tooltip />
                    <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span> {{ dateFormatter(scope.row.createDate, scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifyUser" label="更新人" min-width="100" show-overflow-tooltip />
                    <el-table-column prop="modifyTime" label="更新时间" width="160" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span> {{ dateFormatter(scope.row.modifyDate, scope.row.modifyTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="panelType" label="面板类型" min-width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{ ['1', '3'].includes(scope.row.panelType) ? '系统面板' : '我的面板' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-view"
                                topTitle="查看面板"
                                @on-click="openViewPanelDialog(scope.row, cutInfo)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-edit"
                                topTitle="编辑面板"
                                v-authCode="B_0184"
                                v-if="cutInfo !== '系统面板'"
                                @on-click="openEditPanelDialog(scope.row, cutInfo)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-edit"
                                topTitle="编辑面板"
                                v-authCode="B_0183"
                                v-if="cutInfo == '系统面板'"
                                @on-click="openEditPanelDialog(scope.row, cutInfo)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                icon="el-icon-delete"
                                topTitle="删除面板"
                                v-authCode="B_0166"
                                 v-if="cutInfo !== '系统面板'"
                                :disabled="scope.row.panelCode == 'DEFAULT'"
                                @on-click="handlePanelRemove(scope.row.panelCode, cutInfo)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                icon="el-icon-delete"
                                topTitle="删除面板"
                                v-authCode="B_0168"
                                 v-if="cutInfo == '系统面板'"
                                :disabled="scope.row.panelCode == 'DEFAULT'"
                                @on-click="handlePanelRemove(scope.row.panelCode, cutInfo)"
                            ></RiskIconButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <risk-pagination :paging="panelPage" @page-change="currentChange"></risk-pagination>
                </div>

                <!-- 新增\编辑\查看面板信息 -->

                <!-- 删除 -->
                <div>
                    <yh-dialog drag title="确定删除面板吗?" :visible.sync="delPanelDialog" width="500px">
                        <div class="remove-text">
                            <span> {{ delPanelCodeList.join(' , ') }}</span>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="delPanelDialog = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="delPanel">确 定</el-button>
                        </div>
                    </yh-dialog>
                </div>
            </div>

            <!-- 面板详情 -->
            <div v-else>
                <div class="list-right">
                    <div class="list-right-div">
                        <!-- <div v-if="this.panelForm.panelType == '2'"> -->
                        <el-button type="primary" v-authCode.show="B_0169" key="table1-btn1" @click="openEditPanelDetailDialog">编辑</el-button>
                        <el-button type="danger" size="mini" v-authCode.show="B_0170" key="table1-btn2" @click="openDelModuleDialog">删除</el-button>
                        <el-button type="primary" key="table1-btn3" @click="openCopyPanelDetailDialog" v-if="panelForm.panelType == '1'"
                            >复制到我的面板</el-button
                        >

                        <!-- </div> -->
                    </div>
                    <el-table
                        :data="panelDetailData"
                        :key="panelDetailKey + 'panelDetailKey'"
                        @selection-change="handleSelectionModuleChange"
                        v-table-top="panelDetailPage.currentPage"
                        border
                        size="mini"
                        style="width: 100%"
                        height="calc(100vh - 140px)"
                        v-loading="loading"
                    >
                        <el-table-column type="selection" width="55" size="mini"> </el-table-column>
                        <el-table-column prop="moduleOrder" label="模块顺序" width="100" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{ scope.row.moduleOrder }}
                                <span class="caret-wrapper"
                                    ><i class="sort-caret" :class="{ ascending: scope['$index'] != 0 }" @click="orderClick(scope, 'asc')"></i
                                    ><i
                                        class="sort-caret"
                                        :class="{ descending: scope['$index'] != panelDetailData.length - 1 }"
                                        @click="orderClick(scope, 'des')"
                                    ></i
                                ></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="moduleCode" label="模块编号" show-overflow-tooltip sortable> </el-table-column>
                        <el-table-column prop="moduleName" label="模块名称" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="remark" label="模块说明" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="createUser" label="创建人" min-width="100" show-overflow-tooltip />

                        <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                <span> {{ dateFormatter(scope.row.createDate, scope.row.createTime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="modifyUser" label="更新人" min-width="100" show-overflow-tooltip />
                        <el-table-column prop="modifyTime" label="更新时间" width="160" show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                <span> {{ dateFormatter(scope.row.modifyDate, scope.row.modifyTime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="moduleType" label="模块类型" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span> {{ scope.row.moduleType === '1' ? '默认模块' : '自定义模块' }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <risk-pagination :paging="panelDetailPage" @page-change="currentDetailChange('panelDetail')"></risk-pagination>
                    </div>
                </div>

                <!-- 编辑面板详情 -->
                <yh-dialog title="选择模块" :visible.sync="editPanelDetailDialog" width="800px" id="editDialog" :close-on-click-modal="false" drag>
                    <div style="height: 450px">
                        <RiskTrantable
                            leftPlaceholder="编号/名称"
                            rightPlaceholder="编号/名称"
                            :leftColumns="tranPanelColumns"
                            :rightColumns="tranPanelColumns"
                            :leftTableData="leftPanelTranData"
                            :rightTableData="rightPanelTranData"
                            :leftSearchNames="['moduleCode', 'moduleName']"
                            indexKey="moduleCode"
                            ref="tranTable2"
                            sort="moduleName"
                            v-if="editPanelDetailDialog"
                        />
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="editPanelDetailDialog = false"> 取 消 </el-button>
                        <el-button size="mini" type="primary" @click="updatePanel">确 定 </el-button>
                    </div>
                </yh-dialog>

                <!-- 删除 -->
                <yh-dialog :title="'确定从' + cutInfo + '面板下移除模块吗?'" :visible.sync="delPanelDetailDialog" width="500px" drag>
                    <div class="remove-text">
                        <span> {{ selectedPanelDetailList.join(' , ') }}</span>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="delPanelDetailDialog = false">取 消</el-button>
                        <el-button size="mini" type="primary" @click="delPanelModule">确 定</el-button>
                    </div>
                </yh-dialog>
            </div>
            <yh-dialog drag :title="panelDialogVO.title" :visible.sync="panelDialogVO.visible" width="450px">
                <el-form label-width="120px" size="mini" :model="panelForm" ref="panelForm">
                    <el-form-item label="面板名称" prop="panelName">
                        <el-input v-model="panelForm.panelName"></el-input>
                    </el-form-item>
                    <el-form-item label="面板说明" prop="remark">
                        <el-input type="textarea" :rows="2" v-model="panelForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="closePanelDialog"> 取 消 </el-button>
                    <el-button v-if="panelDialogVO.action != 0" size="mini" type="primary" @click="submitPanelForm"> 确 定 </el-button>
                </div>
            </yh-dialog>
            <!-- // 新增系统面板 -->
            <yh-dialog drag :title="systemPanel.title" :visible.sync="systemPanel.systemPanelVisible" width="450px" :close-on-click-modal="false">
                <el-form label-width="120px" size="mini" :model="panelForm" ref="panelForm">
                    <el-form-item label="面板名称" prop="panelName">
                        <el-input v-model="panelForm.panelName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色" prop="roles">
                        <el-select
                            v-model="panelForm.roles"
                            filterable
                            placeholder="请选择"
                            multiple
                            collapse-tags
                            clearable
                            style="width: 290px"
                        >
                            <el-option
                                v-for="item in systemPanelFormData"
                                :key="item.roleCode"
                                :label="item.roleCode + ' ' + item.roleName"
                                :value="item.roleCode"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面板说明" prop="remark">
                        <el-input type="textarea" :rows="2" v-model="panelForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="closeSystemPanelDialog"> 取 消 </el-button>
                    <el-button size="mini" v-if="systemPanel.title != '查看系统面板'" type="primary" @click="submitSystemPanelForm"> 确 定 </el-button>
                </div>
            </yh-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RiskLeftModule02 from '@/common/components/risk-left-module02.vue';
import RiskRightModule02 from '@/common/components/risk-right-module02.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import RiskTable from '@/common/components/risk-table.vue';
import { DialogVO } from '@yhfin/biz';
import { dateFormat, getConfigItem, getCurrentPageData, sortBy, timeFormat } from '@/utils/tools';
import XEUtils from 'xe-utils';
import { getUser } from '@/utils/user-util';
import Invest from '@/common/dict/invest';
import { objToArr, SGU_CACHE } from '@/utils/diction-const-util';
import Index from '@/pages/setting/dict';
import * as moment from 'moment';
import RiskPagination from '@/common/components/risk-pagination.vue';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'Entrysubscribe',
    components: {
        RiskLeftModule02,
        RiskRightModule02,
        RiskIconButton,
        RiskTable,
        RiskTrantable,
        RiskPagination,
    },
})
export default class Entrysubscribe extends Vue {
    timeFormat = timeFormat;
    private Invest: any = new Invest();
    private dict: any = new Index();

    private moduleData: any[] = []; // 模板表格数据
    moduleKey: number = -1;
    private defaultModuleList: any[] = []; // 默认模块数据
    private selfModuleList: any[] = []; // 自定义模块数据

    private moduleDetailList: any[] = []; // 模块详情数据
    filterModuleDetailList: any[] = []; // 过滤显示字段

    private moduleDetailData: any[] = []; // 模块详情表格数据
    moduleDetailKey: number = -1;
    private panelData: any[] = []; // 父节点展示数据
    panelKey: number = -1;
    private defaultPanelList: any[] = []; // 默认面板数据
    private selfPanelList: any[] = []; // 自定义面板数据
    private panelDetailList: any[] = []; // 面板详情数据
    private panelDetailData: any[] = []; // 面板详情表格数据
    panelDetailKey: number = -1;

    private currentNodeKey = '-1';
    private renderUUID: any;
    // 模块分页对象
    private modulePage: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };
    // 模块详情分页对象
    private moduleDetailPage: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };
    // 面板分页对象
    private panelPage: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };
    // 面板详情分页对象
    private panelDetailPage: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };

    // 轮询时间段
    carouselTimes: any[] = [
        {
            startTime: '130000',
            endTime: '160000',
            interval: '10',
        },
    ];

    private defaultExpandedKeys: any[] = ['-1']; // 默认展开字段

    private moduleTreeData: any = [
        {
            label: '默认模块',
            id: '-1',
            children: [],
        },
        {
            label: '自定义模块',
            id: '0',
            children: [],
        },
    ];

    private panelTreeData: any = [
        {
            label: '系统面板',
            id: '-1',
            children: [],
        },
        {
            label: '我的面板',
            id: '0',
            children: [],
        },
    ];

    private leftHgt: string = 'calc(100vh - 61px)';

    private isModule: boolean = true; // true: 选中的是模块; false: 选中的是面板
    cutInfo: string = '默认模块';

    isCopy: boolean = false;

    private moduleCode: string = ''; // 选中的moduleCode
    private panelCode: string = ''; // 选中的面板

    // 新增、编辑、查看模块弹框对象
    private moduleDialogVO: DialogVO = new DialogVO();
    private delModuleDialog: boolean = false; // 模块删除弹框
    private editModuleDetailDialog: boolean = false; // 模块详情编辑弹框
    private queryModuleDetailDialog: boolean = false; // 模块详情查询弹框
    private delModuleDetailDialog: boolean = false; // 模块详情删除弹框

    // 新增、编辑、查看面板弹框对象
    private panelDialogVO: DialogVO = new DialogVO();
    private delPanelDialog: boolean = false; // 面板删除弹框
    private editPanelDetailDialog: boolean = false;
    private delPanelDetailDialog: boolean = false;

    // 模块表单
    private moduleForm = {
        moduleCode: '',
        moduleName: '',
        moduleType: '1',
        remark: '',
        moduleTask: '',
        initiativeWarn: '',
    };
    private selectedModuleCodeList: any[] = []; // 表格勾选项

    private delModuleCodeList: string[] = []; // 待删除项

    private queryForm = {
        entryCode: '',
        entryName: '',
        controlGrade: '',
        entryType: '',
        fundCode: '',
        riskCalTypes: '',
    };

    // 模块详情穿梭框数据
    private tranColumns: any[] = [
        {
            label: '条目编号',
            prop: 'entryCode',
            width: 80,
        },
        {
            label: '风险说明',
            prop: 'entryName',
        },
    ];

    private leftTranData: any[] = [];
    private rightTranData: any[] = [];

    // 面板详情穿梭框数据
    private tranPanelColumns: any[] = [
        {
            label: '模块编号',
            prop: 'moduleCode',
            width: 80,
        },
        {
            label: '名称',
            prop: 'moduleName',
        },
    ];

    private transData: any[] = [];
    private leftPanelTranData: any[] = [];
    private rightPanelTranData: any[] = [];

    // 是否自动触警模块
    private autoTriggerParamShow: boolean = false;

    // 面板
    private panelForm = {
        panelCode: '',
        panelName: '',
        panelType: '',
        remark: '',
        panelOrder: 0,
        roles: [],
    };
    private selectedPanelCodeList: any[] = [];
    private delPanelCodeList: string[] = [];
    private entryDataLists: any[] = [];
    entryCodeList: any[];
    moduleList: any[] = [];
    delPendingData: any[] = []; // 有待删除
    selectedEntryCodeList: any[] = [];
    selectedPanelDetailList: any[] = [];
    fundCodeSelectData: any[] = [];

    fundDetailDialog: boolean = false;
    fundDetailData: any[] = [];

    selectedItemGroup: any[] = []; // 勾选条目组

    itemGroupAll: any[] = []; // 编辑下的条目组

    loading: boolean = false; // 页面加载

    editLoading: boolean = false;

    systemPanel = {
        systemPanelVisible: false, // 系统面板新增编辑弹窗
        title: '新增系统面板',
    }
    systemPanelFormData = []; // 角色列表

    @Watch('systemPanel.systemPanelVisible', { immediate: true, deep: true })
    watchSystemPanelVisible(newVal) {
        if (!newVal) {
            this.panelForm = {
                panelCode: '',
                panelName: '',
                panelType: '',
                remark: '',
                panelOrder: 0,
                roles: []
            };
        }
    }

    async mounted() {
        console.log('测试');

        const WEB_DOCKING = getConfigItem('WEB_DOCKING');

        this.autoTriggerParamShow = WEB_DOCKING === 'MAXWEALTH';
        // 获取条目组信息(模板明细编辑)
        // if (WEB_DOCKING == 'MAXWEALTH') {
        this.getDynamicGroup();
        // }
        // 获取产品信息 (产品序号下拉框数据)
        this.fundCodeSelectData = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        this.queryModuleList();
        this.queryPanelList();
    }

    // 获取条目组信息(模板明细编辑)
    private getDynamicGroup(): void {
        this.$axios.get('/entry/group/list').then((res: any) => {
            this.itemGroupAll = res;
        });
    }

    // 模块树节点点击事件
    handleModuleNodeClick(data: any, node: any): void {
        (this.$refs.tree2 as any).setCurrentKey(null);
        this.isModule = true;
        this.cutInfo = data.label;
        this.moduleCode = data.id;
        if (node.level === 1) {
            this.currentChange(1);
        } else {
            this.selectedItemGroup = data.data.entryGroups || [];
            this.moduleForm.moduleType = data.data.moduleType;
            this.queryModuleDetailList();
        }
    }

    // 面板树节点点击事件
    handlePanelNodeClick(data: any, node: any): void {
        console.log(data, node);

        (this.$refs.tree1 as any).setCurrentKey(null);
        this.isModule = false;
        this.cutInfo = data.label;
        this.panelCode = data.id;

        if (node.level === 1) {
            this.currentChange(1);
        } else {
            this.panelForm.panelType = data.data.panelType;
            this.queryPanelDetailList();
        }
    }

    // 父节点表格分页
    private currentChange(val: number): void {
        if (this.isModule) {
            let visibleData = this.cutInfo == '默认模块' ? this.defaultModuleList : this.selfModuleList;
            this.moduleForm.moduleType = this.cutInfo === '默认模块' ? '1' : '2';
            this.modulePage.total = visibleData.length;
            if (val !== undefined) {
                this.modulePage.currentPage = val;
            }
            this.moduleData = getCurrentPageData(visibleData, this.modulePage.currentPage, this.modulePage.pageSize);
            this.moduleKey++;
        } else {
            let visibleData = this.cutInfo === '系统面板' ? this.defaultPanelList : this.selfPanelList;
            this.panelForm.panelType = this.cutInfo === '系统面板' ? '1' : '2';
            this.panelPage.total = visibleData.length;
            if (val !== undefined) {
                this.panelPage.currentPage = val;
            }
            this.panelData = getCurrentPageData(visibleData, this.panelPage.currentPage, this.panelPage.pageSize);
            this.panelKey++;
        }
    }

    getSelectableModule(row) {
        return row.moduleCode != 'YH001';
    }

    getSelectablePanel(row) {
        return row.panelCode != 'DEFAULT';
    }

    /* *********************** 模块相关 start ********************* */
    //  获取模块数据
    private queryModuleList() {
        this.loading = true;
        this.$axios
            .get('/entry/subscribe/all/module/user')
            .then((res: any) => {
                this.transData = res;
                this.defaultModuleList = [];
                res.forEach(ele => {
                    if (ele.moduleType == '1') {
                        if (ele.moduleCode == 'YH001') {
                            this.defaultModuleList.unshift(ele);
                        } else {
                            this.defaultModuleList.push(ele);
                        }
                    }
                });
                // this.defaultModuleList = res.filter(item => item.moduleType === '1');
                this.selfModuleList = res.filter(item => item.moduleType === '2');
                this.getTreeData();
                this.currentChange(1);
                this.loading = false;
            })
            .catch(() => {
                this.loading = false;
            });
    }

    // 获取模块树数据
    getTreeData() {
        let defaultNodeDatas = [];
        let selfNodeDatas = [];
        for (let item of this.defaultModuleList) {
            let datas = item.moduleName;
            if (item.moduleCode == 'YH001') {
                defaultNodeDatas.unshift({ data: item, label: datas, id: item.moduleCode });
            } else {
                defaultNodeDatas.push({ data: item, label: datas, id: item.moduleCode });
            }
        }
        for (let item of this.selfModuleList) {
            let datas = item.moduleName;
            selfNodeDatas.push({ data: item, label: datas, id: item.moduleCode });
        }
        this.moduleTreeData[0].children = defaultNodeDatas;
        this.moduleTreeData[1].children = selfNodeDatas;
    }

    // 轮询时间段添加
    private carouselAddClick(): void {
        this.carouselTimes.push({
            startTime: '130000',
            endTime: '160000',
            interval: '10',
        });
    }

    // 轮询时间段删除
    private carouselDeleteClick(item, index): void {
        if (this.moduleDialogVO.action == 0) {
            return;
        }
        this.carouselTimes.splice(index, 1);
    }

    isPass = true;
    // 开始时间
    private startTimeChange(value) {
        if (!value.startTime) {
            return;
        }
        this.isPass = false;
        if (value.endTime && value.startTime.valueOf() >= value.endTime.valueOf()) {
            this.yh_message_warn('起始时间需小于结束时间');
            value.endTime = '';
            return;
        }
        for (let i = 0; i < this.carouselTimes.length; i++) {
            let item = this.carouselTimes[i];
            // 小对大(已有)
            if (
                item['endTime'] &&
                item['startTime'] &&
                value.startTime &&
                moment(value.startTime, 'HHmmss').isBetween(moment(item['startTime'], 'HHmmss'), moment(item['endTime'], 'HHmmss'))
            ) {
                this.yh_message_warn('轮询时间段不可交叉,与第' + ++i + '轮询时间段交叉');
                value.startTime = '';
                return;
            } else if (
                item['endTime'] &&
                item['startTime'] &&
                value.startTime &&
                value.endTime &&
                moment(item['startTime'], 'HHmmss').isBetween(moment(value.startTime, 'HHmmss'), moment(value.endTime, 'HHmmss'))
            ) {
                // 大对小(已有)
                this.yh_message_warn('轮询时间段不可交叉,与第' + ++i + '轮询时间段交叉');
                value.startTime = '';
                return;
            }
        }
        this.isPass = true;
    }

    // 结束时间
    private endTimeChange(value) {
        if (!value.endTime) {
            return;
        }
        this.isPass = false;

        if (value.startTime && value.startTime.valueOf() >= value.endTime.valueOf()) {
            this.yh_message_warn('结束时间需大于起始时间');
            value.endTime = '';
            return;
        }
        for (let i = 0; i < this.carouselTimes.length; i++) {
            let item = this.carouselTimes[i];
            if (
                item['endTime'] &&
                item['startTime'] &&
                value.endTime &&
                moment(value.endTime, 'HHmmss').isBetween(moment(item['startTime'], 'HHmmss'), moment(item['endTime'], 'HHmmss'))
            ) {
                this.yh_message_warn('轮询时间段不可交叉,与第' + ++i + '轮询时间段交叉');
                value.endTime = '';
                return;
            } else if (
                value.startTime &&
                value.endTime &&
                item['startTime'] &&
                item['endTime'] &&
                moment(item['startTime'], 'HHmmss').isBetween(moment(value.startTime, 'HHmmss'), moment(value.endTime, 'HHmmss'))
            ) {
                // 大对小(已有)
                this.yh_message_warn('轮询时间段不可交叉,与第' + ++i + '轮询时间段交叉');
                value.endTime = '';
                return;
            }
        }
        this.isPass = true;
    }

    // 频率
    private intervalChange(item, value) {
        if (!value) {
            return value;
        }
        this.isPass = false;

        value = String(value);
        value = value.replace(/[^\d.]/g, ''); // 清除“数字”和“.”以外的字符
        if (item.startTime && item.endTime) {
            let m = moment(item.endTime, 'HHmmss').diff(moment(item.startTime, 'HHmmss'), 'minutes', true);
            if (m > 60) {
                if (value > 60) {
                    this.yh_message_warn('只能为整数,最大计算频率为60分钟');
                    item.interval = '';
                    return;
                }
            } else if (value > m) {
                this.yh_message_warn('只能为整数,最大计算频率为轮询时间段差值为:' + Math.floor(m));
                item.interval = '';
                return;
            }
        }
        this.isPass = true;
    }

    // 显示新增模块弹框
    private openAddModuleDialog() {
        this.moduleDialogVO = this.moduleDialogVO.getAddDialog('新增模块');
        this.moduleForm.moduleCode = '';
    }

    // 显示修改模块弹框
    private openEditModuleDialog(row: any) {
        this.moduleDialogVO = this.moduleDialogVO.getUpdateDialog('编辑模块');
        this.$nextTick(() => {
            for (const key in this.moduleForm) {
                this.moduleForm[key] = (row[key] !== undefined ? row[key] : '').toString();
            }
            this.carouselTimes = row.moduleTask
                ? JSON.parse(row.moduleTask)
                : [
                      {
                          startTime: '130000',
                          endTime: '160000',
                          interval: '10',
                      },
                  ];
        });
    }

    // 显示查看模块弹框
    private openViewModuleDialog(row: any) {
        this.moduleDialogVO = this.moduleDialogVO.getSeeDialog('查看模块');
        this.$nextTick(() => {
            this.moduleForm.moduleName = row.moduleName;
            this.moduleForm.remark = row.remark;
            this.moduleForm.initiativeWarn = row.initiativeWarn.toString();
            this.carouselTimes = row.moduleTask
                ? JSON.parse(row.moduleTask)
                : [
                      {
                          startTime: '130000',
                          endTime: '160000',
                          interval: '10',
                      },
                  ];
        });
    }

    // 关闭模块(新增)
    private closeModuleDialog() {
        (this.$refs.moduleForm as any).resetFields();
        this.moduleDialogVO.visible = false;
    }

    handleDialogClosed() {
        this.carouselTimes = [
            {
                startTime: '130000',
                endTime: '160000',
                interval: '10',
            },
        ];
    }
    handle() {
        let isContinue = true;
        if (this.carouselTimes) {
            let index = 0;
            for (let item of this.carouselTimes) {
                index++;
                // console.log(item);
                if (!item['startTime'] || !item['endTime'] || !item['interval']) {
                    this.yh_message_warn('轮询时间段不能为空');
                    isContinue = false;
                    return;
                }

                let data = this.carouselTimes.filter(sec => sec.startTime == item['startTime'] && sec.endTime == item['endTime']);
                if (data.length > 1) {
                    this.yh_message_warn('不能设置同样的轮询时间段');
                    isContinue = false;
                    return;
                }

                let valIndex = this.carouselTimes.findIndex(
                    ele =>
                        moment(ele.endTime, 'HHmmss').isBetween(moment(item['startTime'], 'HHmmss'), moment(item['endTime'], 'HHmmss')) ||
                        moment(ele.endTime, 'HHmmss').isBetween(moment(item['startTime'], 'HHmmss'), moment(item['endTime'], 'HHmmss'))
                );

                if (valIndex > -1) {
                    this.yh_message_warn('第' + index + '个与第' + ++valIndex + '个轮询时间段存在交叉');
                    isContinue = false;
                    return;
                }

                let valIndex1 = this.carouselTimes.findIndex(
                    ele => ele.interval > moment(item.endTime, 'HHmmss').diff(moment(item.startTime, 'HHmmss'), 'minutes', true) || ele.interval > 60
                );

                if (valIndex1 > -1) {
                    this.yh_message_warn('第' + ++valIndex1 + '个轮询时间段计算频率不对');
                    isContinue = false;
                    return;
                }
            }
        }
        if (isContinue) {
            this.moduleForm.moduleTask = JSON.stringify(this.carouselTimes);
        } else {
            return;
        }

        if (this.moduleDialogVO.action === 1) {
            this.$axios.post('/entry/subscribe/add/module', this.moduleForm).then((res: any) => {
                this.yh_message_success('新增成功');
                this.closeModuleDialog();
                this.queryModuleList();
            });
        } else {
            this.$axios.post('/entry/subscribe/update/module', this.moduleForm).then((res: any) => {
                this.yh_message_success('更新成功');
                this.closeModuleDialog();
                this.queryModuleList();
            });
        }
    }
    // 提交模块表单
    private submitModuleForm(): void {
        if (!this.moduleForm.moduleName || !this.moduleForm.moduleName.trim()) {
            this.yh_message_warn('模块名称不可为空');
            return;
        }
        if (this.moduleForm.moduleName?.length > 20) {
            this.yh_message_warn('模块名称长度须在0和20之间');
            return;
        }

        if (!this.isPass) {
            // setTimeout(() => {
            this.isPass = true;
            // this.handle();
            // }, 2000);
            return;
        }
        this.handle();
    }

    // 获取模块表格勾选数据
    private handleSelectionChange(val: any) {
        this.selectedModuleCodeList = [];
        for (var i in val) {
            this.selectedModuleCodeList.push(val[i].moduleCode);
        }
    }

    // 判断模块删除类型
    private handleModuleRemove(val: any) {
        if (val === -1) {
            if (!this.selectedModuleCodeList || this.selectedModuleCodeList.length < 1) {
                this.yh_message_warn('未选择删除项');
                return;
            }
            this.delModuleCodeList = this.selectedModuleCodeList;
        } else {
            this.delModuleCodeList = [val];
        }
        this.delModuleDialog = true;
    }

    // 删除模块
    private delModule() {
        this.$axios({
            url: '/entry/subscribe/delete/module',
            method: 'POST',
            data: this.delModuleCodeList,
        }).then(res => {
            this.yh_message_success('删除成功');
            this.queryModuleList();
            this.delModuleDialog = false;
            this.selectedModuleCodeList = [];
        });
    }

    // 获取模块详情
    private queryModuleDetailList() {
        this.loading = true;
        this.$axios
            .get('/entry/subscribe/entrys/' + this.moduleCode)
            .then((res: any) => {
                this.moduleDetailList = res;
                this.filterModuleDetailList = res;
                this.currentDetailChange('moduleDetail');
                this.loading = false;
                this.rightTranData = res.filter(item => item.isDynamicEntry != 2);
            })
            .catch(() => {
                this.loading = false;
            });
    }

    // 控制产品
    private showFund(val: any) {
        this.fundDetailData = this.fundCodeSelectData.filter(item => val.includes(item.fundCode));
        this.fundDetailDialog = true;
    }

    // 条目状态列转换
    private formatStatus(row): string {
        return row.entryStatusValid ? '启用' : '禁用';
    }

    // 作用范围列转换
    private formatRiskCalTypes(row) {
        let show = [];
        if (row.riskCalTypes && row.riskCalTypes.length) {
            for (const item of row.riskCalTypes) {
                show.push(this.dict.RiskCalType[item]);
            }
        }
        return show.join(',');
    }

    // 查询条目(模块编辑)
    private queryEntryList(): void {
        this.editModuleDetailDialog = true;
        this.$axios
            .post('/entry/list/CodeOrName', {
                paging: {
                    currentPage: 1,
                    pageSize: 0,
                },
                codeOrName: '',
                filterEntryTypes: ['3', '5', '8'],
                filterEntryCode: this.rightTranData.map((item: any) => item.entryCode),
            })
            .then((res: any) => {
                let a = res.list;
                for (let i = 0; i < a.length; i++) {
                    a[i].id = a[i].entryCode;
                }
                this.leftTranData = a;
            })
            .catch(() => {});
    }

    // 条件查询条目
    private searchEntry() {
        this.filterModuleDetailList = this.handleFilter(this.moduleDetailList, this.queryForm);
        this.moduleDetailPage.currentPage = 1;
        this.currentDetailChange('moduleDetail');
        this.queryModuleDetailDialog = false;
        this.yh_message_success('查询成功');
    }

    // 条目组筛选数据
    private handleFilter(dataSource: any, param: any): any {
        if (!dataSource) {
            return dataSource;
        } else {
            return dataSource.filter(
                (item: any) =>
                    (!param.entryCode || (item.entryCode && item.entryCode.toUpperCase().includes(param.entryCode.toUpperCase()))) &&
                    (!param.entryName || (item.entryName && item.entryName.includes(param.entryName))) &&
                    (!param.entryType || item.entryType === param.entryType) &&
                    (!param.controlGrade || item.controlGrade === param.controlGrade) &&
                    (!param.fundCode || (item.accountControlValue && item.accountControlValue.includes(param.fundCode))) &&
                    (!param.riskCalTypes || (item.riskCalTypes && item.riskCalTypes.includes(param.riskCalTypes)))
            );
        }
    }

    // 重置查询表单
    private resetEntryForm() {
        (this.$refs.queryForm as any).resetFields();
    }

    // 取消编辑模块
    private cancelModuleEntry() {
        this.editModuleDetailDialog = false;
    }

    // 编辑模块下的条目(确 认)
    private updateModuleEntry() {
        this.entryCodeList = [];
        const rightData = (this.$refs.tranTable as any).getRightAllData();
        rightData.map((item: any) => {
            this.entryCodeList.push(item.entryCode);
        });
        this.$axios
            .post('/entry/subscribe/edit/module/entry/' + this.moduleCode, {
                entryCodes: this.entryCodeList,
                entryGroups: this.selectedItemGroup || [],
            })
            .then((res: any) => {
                this.cancelModuleEntry();
                this.yh_message_success('更新成功');

                let data = this.moduleForm.moduleType == '1' ? this.defaultModuleList : this.selfModuleList;
                data.forEach((item, index) => {
                    if (item.moduleCode == this.moduleCode) {
                        item.entryGroups = this.selectedItemGroup || [];
                        console.log(data, this.moduleCode, index, this.selectedItemGroup);
                        return;
                    }
                });
                this.queryModuleDetailList();
            })
            .catch(() => {
                this.cancelModuleEntry();
            });
    }

    // 模块详情勾选
    private handleSelectionDetailChange(val: any) {
        this.selectedEntryCodeList = val;
    }

    // 删除
    private openDelEntryDialog() {
        if (!this.selectedEntryCodeList || this.selectedEntryCodeList.length < 1) {
            this.yh_message_warn('未选择删除项');
            return;
        }
        let data = this.selectedEntryCodeList.filter(item => item.isDynamicEntry == 1);
        this.delPendingData = XEUtils.map(data, item => item.entryCode);

        if (this.delPendingData.length > 0) {
            this.delModuleDetailDialog = true;
        } else {
            this.yh_message_warn('勾选项来自条目组数据,不可删除');
        }
    }

    // 确认删除模块下的条目
    private delEntry() {
        this.$axios({
            url: '/entry/subscribe/delete/module/entry/' + this.moduleCode,
            method: 'POST',
            data: this.delPendingData,
        }).then((res: any) => {
            this.yh_message_success('删除成功');
            this.queryModuleDetailList();
            this.selectedEntryCodeList = [];
            this.delModuleDetailDialog = false;
        });
    }

    // 明细分页
    private currentDetailChange(type: string) {
        if (type == 'moduleDetail') {
            this.moduleDetailPage.total = this.filterModuleDetailList.length;
            this.moduleDetailData = getCurrentPageData(
                this.filterModuleDetailList,
                this.moduleDetailPage.currentPage,
                this.moduleDetailPage.pageSize
            );
            this.moduleDetailKey++;
        } else {
            this.panelDetailData = getCurrentPageData(this.panelDetailList, this.panelDetailPage.currentPage, this.panelDetailPage.pageSize);
        }
    }
    /* *********************** 模块相关 end ********************* */

    /* *********************** 面板相关 start ********************* */
    // 获取面板数据
    private queryPanelList() {
        this.loading = true;
        this.$axios
            .get('/entry/subscribe/all/panel/user')
            .then((res: any) => {
                // this.defaultPanelList = res.filter(item => item.panelType === '1');
                this.defaultPanelList = [];
                res.forEach((ele, index) => {
                    // console.log(index, '+++++++++=');
                    // this.$set(ele, 'panelOrder', index);
                    if (ele.panelType == '1' || ele.panelType == '3') {
                        if (ele.panelCode == 'DEFAULT') {
                            this.defaultPanelList.unshift(ele);
                        } else {
                            this.defaultPanelList.push(ele);
                        }
                    }
                });

                this.selfPanelList = res.filter(item => item.panelType === '2');
                let defaultNodeDatas = [];
                let selfNodeDatas = [];
                for (let item of this.defaultPanelList) {
                    if (item.panelCode == 'DEFAULT') {
                        defaultNodeDatas.unshift({ data: item, label: item.panelName, id: item.panelCode });
                    } else {
                        defaultNodeDatas.push({ data: item, label: item.panelName, id: item.panelCode });
                    }
                }
                for (let item of this.selfPanelList) {
                    selfNodeDatas.push({ data: item, label: item.panelName, id: item.panelCode });
                }
                this.panelTreeData[0].children = defaultNodeDatas;
                this.panelTreeData[1].children = selfNodeDatas;
                this.currentChange(1);
                this.loading = false;
            })
            .catch(() => {
                this.loading = false;
            });
    }

    // 显示新增面板弹框
    private openAddPanelDialog() {
        this.isCopy = false;
        this.panelDialogVO = this.panelDialogVO.getAddDialog('新增面板');
        this.panelForm.panelCode = '';
    }

    // 显示新增面板弹框
    private openAddSystemPanelDialog() {
        this.systemPanel.systemPanelVisible = true;
        this.systemPanel.title = '新增系统面板';
        this.getRoleList();
    }
    /**
     * 获取所有角色列表
     */
    private getRoleList() {
        this.systemPanelFormData = [];
        return new Promise((resolve, reject) => {
            this.$axios({ url: '/role/query/all' })
                .then((res: any) => {
                    this.systemPanelFormData = res;
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 复制面板详情
    openCopyPanelDetailDialog(): void {
        this.isCopy = true;
        // 复制到我的面板
        this.panelDialogVO = this.panelDialogVO.getAddDialog('编辑面板');
        this.panelForm.panelCode = this.panelCode;
        this.panelForm.panelName = this.cutInfo + '_复制';
    }

    // 显示修改面板弹框
    private openEditPanelDialog(row: any, param) {
        if (param == '我的面板') {
            this.panelDialogVO = this.panelDialogVO.getUpdateDialog('编辑面板');
            this.$nextTick(() => {
                for (const key in this.panelForm) {
                    this.panelForm[key] = row[key];
                }
            });
        } else if (param == '系统面板') {
            console.log('系统面板row', row)
            this.systemPanel.systemPanelVisible = true;
            this.systemPanel.title = '编辑系统面板';
            this.getRoleList();
            this.$nextTick(() => {
                this.panelForm.panelCode = row.panelCode;
                this.panelForm.panelName = row.panelName;
                this.panelForm.remark = row.remark;
                this.panelForm.roles = row.roles;
                this.panelForm.panelType = row.panelType;
            });
        }
    }

    // 显示查看面板弹框
    private openViewPanelDialog(row: any, param) {
        if (param == '我的面板') {
            this.panelDialogVO = this.panelDialogVO.getSeeDialog('查看面板');
            this.$nextTick(() => {
                this.panelForm.panelName = row.panelName;
                this.panelForm.remark = row.remark;
            });
        } else if (param == '系统面板') {
            this.systemPanel.systemPanelVisible = true;
            this.systemPanel.title = '查看系统面板';
            this.getRoleList();
            this.$nextTick(() => {
                this.panelForm.panelName = row.panelName;
                this.panelForm.remark = row.remark;
                this.panelForm.roles = row.roles;
            });
        }
    }

    private closePanelDialog() {
        (this.$refs.panelForm as any).resetFields();
        this.panelDialogVO.visible = false;
    }
    private closeSystemPanelDialog() {
        (this.$refs.panelForm as any).resetFields();
        this.systemPanel.systemPanelVisible = false;
    }

    // 提交面板表单
    private submitPanelForm() {
        if (!this.panelForm.panelName || !this.panelForm.panelName.trim()) {
            this.yh_message_warn('面板名称不可为空');
            return;
        }
        if (this.panelDialogVO.action === 1) {
            if (this.isCopy) {
                this.$axios.post('/entry/subscribe/copy/panel', this.panelForm).then((res: any) => {
                    this.yh_message_success('复制成功');
                    this.closePanelDialog();
                    this.queryPanelList();
                    (this.$refs.tree2 as any).setCurrentKey('0');
                    this.cutInfo = '我的面板';
                    this.panelCode = '0';
                    this.currentChange(1);
                    this.queryModuleList();
                });
            } else {
                this.$axios.post('/entry/subscribe/add/panel', this.panelForm).then((res: any) => {
                    this.yh_message_success('新增成功');
                    this.closePanelDialog();
                    this.queryPanelList();
                });
            }
        } else {
            this.$axios.post('/entry/subscribe/update/panel', this.panelForm).then((res: any) => {
                this.yh_message_success('更新成功');
                this.closePanelDialog();
                this.queryPanelList();
            });
        }
    }
    // 新增系统面板
    private submitSystemPanelForm() {
        if (!this.panelForm.panelName || !this.panelForm.panelName.trim()) {
            this.yh_message_warn('系统面板名称不可为空');
            return;
        }
        let data = JSON.parse(JSON.stringify(this.panelForm));
        if (this.systemPanel.title == '新增系统面板') {
            data.panelType = '3';
            this.$axios.post('/entry/subscribe/add/panel', data).then((res: any) => {
                this.yh_message_success('新增成功');
                this.closeSystemPanelDialog();
                this.queryPanelList();
            });
        } else if (this.systemPanel.title == '编辑系统面板') {
            this.$axios.post('/entry/subscribe/update/panel', data).then((res: any) => {
                this.yh_message_success('更新成功');
                this.closeSystemPanelDialog();
                this.queryPanelList();
            });
        }
    }

    private handlePanelSelectionChange(val: any) {
        this.selectedPanelCodeList = [];
        for (var i in val) {
            this.selectedPanelCodeList.push(val[i].panelCode);
        }
    }

    // 判断面板删除类型
    private handlePanelRemove(val: any, param) {
        if (val === -1) {
            if (!this.selectedPanelCodeList || this.selectedPanelCodeList.length < 1) {
                this.yh_message_warn('未选择删除项');
                return;
            }
            this.delPanelCodeList = this.selectedPanelCodeList;
        } else {
            this.delPanelCodeList = [];
            this.delPanelCodeList.push(val);
        }
        this.delPanelDialog = true;
    }

    // 删除面板
    private delPanel() {
        this.$axios({
            url: '/entry/subscribe/delete/panel',
            method: 'POST',
            data: this.delPanelCodeList,
        }).then(res => {
            this.yh_message_success('删除成功');
            this.queryPanelList();
            this.selectedPanelCodeList = [];
            this.delPanelDialog = false;
        });
    }

    // 获取面板详情
    private queryPanelDetailList() {
        this.loading = true;
        this.$axios
            .get('/entry/subscribe/modules/' + this.panelCode)
            .then((res: any) => {
                this.panelDetailList = res;
                this.rightPanelTranData = res;
                this.panelDetailPage.total = res.length;
                this.panelDetailData = getCurrentPageData(this.panelDetailList, this.panelDetailPage.currentPage, this.panelDetailPage.pageSize);
                this.panelDetailKey++;
                this.loading = false;
            })
            .catch(() => {
                this.loading = false;
            });
    }

    private openEditPanelDetailDialog(): void {
        let rightKeys = XEUtils.map(this.rightPanelTranData, item => item.moduleCode);
        this.editPanelDetailDialog = true;
        let tempData = this.transData.filter(item => !rightKeys.includes(item.moduleCode));
        if (this.panelForm.panelType == '1') {
            this.leftPanelTranData = tempData.filter(item => item.moduleType == this.panelForm.panelType);
        } else {
            this.leftPanelTranData = tempData;
        }
    }

    // 编辑面板详情
    private updatePanel() {
        this.moduleList = [];
        const rightData = (this.$refs.tranTable2 as any).getRightAllData();
        rightData.map((item: any) => {
            const module = this.panelDetailList.find(ele => ele.moduleCode == item.moduleCode) || {};
            this.moduleList.push({ moduleCode: item.moduleCode, moduleOrder: module.moduleOrder || 999 });
        });

        this.$axios.post('/entry/subscribe/edit/panel/module/' + this.panelCode, this.moduleList).then(res => {
            this.editPanelDetailDialog = false;
            this.yh_message_success('更新成功');
            this.queryPanelDetailList();
        });
    }

    // 排序
    private orderClick(scope: any, type: string): void {
        console.log(scope);
        this.handleSort(scope, type, 'moduleOrder', this.panelDetailList);
        this.panelDetailData = getCurrentPageData(this.panelDetailList, this.panelDetailPage.currentPage, this.panelDetailPage.pageSize);
        this.panelDetailKey++;
        this.$axios.post('entry/subscribe/edit/panel/moduleOrder/' + this.panelCode, this.panelDetailData).then((res: any) => {});
    }

    // 处理排序字段
    handleSort(scope: any, type: string, param: string, list: any) {
        // 从0开始
        let index = scope.$index;
        let temp = scope.row[param];
        // 上升
        if (type == 'asc') {
            list[index][param] = list[index - 1][param];
            list[index - 1][param] = temp;
        } else {
            // 下降
            list[index][param] = list[index + 1][param];
            list[index + 1][param] = temp;
        }

        list.sort((a, b) => {
            return a[param] - b[param];
        });
    }

    // 排序面板集合
    private orderClickOnPanel(scope: any, type: string) {
        if (this.panelCode == '0') {
            this.handleSort(scope, type, 'panelOrder', this.selfPanelList);
            this.panelData = getCurrentPageData(this.selfPanelList, this.panelPage.currentPage, this.panelPage.pageSize);
            this.panelKey++;
            this.$axios.post('/entry/subscribe/edit/panel/order', this.panelData).then((res: any) => {});
        } else if (this.panelCode == '-1') {
            this.handleSort(scope, type, 'panelOrder', this.defaultPanelList);
            this.panelData = getCurrentPageData(this.defaultPanelList, this.panelPage.currentPage, this.panelPage.pageSize);
            this.panelKey++;
            this.$axios.post('/entry/subscribe/edit/panel/order', this.panelData).then((res: any) => {});
        }
    }

    private handleSelectionModuleChange(val: any) {
        this.selectedPanelDetailList = [];
        for (var i in val) {
            this.selectedPanelDetailList.push(val[i].moduleCode);
        }
    }

    private openDelModuleDialog() {
        if (!this.selectedPanelDetailList || this.selectedPanelDetailList.length < 1) {
            this.yh_message_warn('未选择删除项');
            return;
        }
        this.delPanelDetailDialog = true;
    }

    // 删除模块下的条目
    private delPanelModule() {
        this.$axios({
            url: '/entry/subscribe/delete/panel/module/' + this.panelCode,
            method: 'POST',
            data: this.selectedPanelDetailList,
        }).then(res => {
            this.yh_message_success('删除成功');
            this.queryPanelDetailList();
            this.selectedPanelDetailList = [];
            this.delPanelDetailDialog = false;
        });
    }

    /* *********************** 面板相关 end ********************* */

    // 时间处理
    private dateFormatter(date, time) {
        if (date || time) {
            return (date ? dateFormat(date, true) : '') + ' ' + (time ? timeFormat(time, true) : '');
        }
        return '--';
    }
}
</script>
<style lang="scss" scoped>
.list-left {
    height: 100vh;
    width: 221px;
    border: 1px solid #cacaca;

    .list-heard {
        font-weight: 700;
        font-size: 20px;
        margin: 10px 0px 0px 10px;
    }

    .list-left-div {
        width: 220px;
        height: 40px;
        background: #fff;
        border: 1px solid #cacaca;
        padding-top: 4px;
        padding-left: 10px;
        position: relative;

        .left-p {
            position: absolute;
            right: 5px;
            top: 4px;

            .el-icon-search {
                color: #fff;
            }
        }

        & /deep/ .el-button {
            padding: 6px;
        }
    }

    .left-tree {
        width: 220px;
        height: calc(40vh - 30px);
        overflow: scroll;
    }
}
.list-right {
    height: 100vh;
    border: 1px solid #cacaca;
    position: absolute;
    top: 0;
    left: 220px;
    width: calc(100vw - 220px);

    .list-right-div {
        border: 1px solid #cacaca;
        padding: 0px 10px;
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
}
#editDialog /deep/ .el-dialog {
    margin-top: 3vh !important;
    .el-dialog__body {
        max-height: 90vh;
    }
}
/deep/ .el-dialog .el-dialog__body .el-date-editor {
    min-width: 140px;
    width: 20%;
}

.ascending:hover {
    border-bottom-color: #409eff;
}

.descending:hover {
    border-top-color: #409eff;
}

.icon-minus {
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid transparent;

    border-radius: 50%;
    margin: 4px 12px;
}

/deep/ .el-select__tags {
    flex-wrap: nowrap;

    .el-tag.el-tag--info {
        display: flex;
        align-items: center;

        .el-select__tags-text {
            display: block;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.temp {
    // pointer-events: none;
    cursor: no-drop;
}
</style>
